<template>
  <div>
    <el-card class="main">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="合作商">
          <el-input v-model="formInline.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="选择日期" prop="Time">
          <el-date-picker
            v-model="formInline.Time"
            type="daterange"
            unlink-panels
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="Search"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="4"><div>笔数统计:<span>{{ top.totalCount }}</span>元</div></el-col>
        <el-col :span="4"><div>收入统计:<span>11812</span>元</div></el-col>
        <el-col :span="4"><div>分成统计:<span>11812</span>元</div></el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'normal',
          background: '#f3f6fb',
        }"
      >
        <el-table-column label="订单日期" prop="date" />
        <el-table-column label="合作商" prop="ownerName" />
        <el-table-column label="分成比例" prop="ratio">
          <template #default="{row}">
            {{ `${row.ratio}%` }}
          </template>
        </el-table-column>
        <el-table-column label="收入(元)" prop="orderTotalMoney">
          <template #default="{row}">
            {{ `${row.orderTotalMoney/100}` }}
          </template>
        </el-table-column>
        <el-table-column label="笔数" prop="orderCount" />
        <el-table-column label="分成金额(元)" prop="totalBill">
          <template #default="{row}">
            {{ `+${row.totalBill/100}` }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row v-if="totalPage!==1" type="flex" justify="space-between" align="middle">
        <el-col :span="19">
          <p class="paginationHeader">
            {{ `共${totalCount}条记录 第${page.pageIndex}/${totalPage}页` }}
          </p>
        </el-col>
        <el-col :span="5">
          <el-pagination
            background
            :current-page="page.pageIndex"
            :page-size="page.pageSize"
            :total="totalCount"
            layout="prev, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getDateStart, getDateEnd, getDateEndTime, getDateStartTime } from '@/utils/getTime'
import { partnerCollectList, orderCount } from '@/api/report'
export default {
  data() {
    return {
      formInline: { name: '', Time: '' },
      loading: false,
      list: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        start: getDateStart(),
        end: getDateEnd()
      },
      time: {
        start: getDateStartTime(),
        end: getDateEndTime()
      },
      totalCount: 0,
      totalPage: 0,
      top: {
        totalCount: ''// 笔数统计
      }
    }
  },
  async created() {
    this.partnerCollectList()
    // 笔数统计
    const { data } = await orderCount(this.time)
    this.top.totalCount = data
  },
  methods: {
    // 表格数据
    async  partnerCollectList() {
      this.loading = true
      const { data } = await partnerCollectList(this.page)
      this.list = data.currentPageRecords
      this.loading = false
      this.totalCount = Number(data.totalCount)
      this.totalPage = Number(data.totalPage)
    },
    // 1.查询
    Search() {},
    // 2.新增
    addForm() {},
    // 3.分页
    changePage(val) {
      this.page.pageIndex = val
      this.partnerCollectList()
    },
    // 4.查看详情
    detailsFn() {}
  }
}
</script>

<style lang="scss">
.el-col-4 {
  color: #333333;
  font-size: 14px;
  span {
    font-size: 20px;
    color: #ff5757;
  }
}
</style>
